package com.html2image;

import gui.ava.html.parser.HtmlParser;
import gui.ava.html.parser.HtmlParserImpl;
import gui.ava.html.renderer.ImageRenderer;
import gui.ava.html.renderer.ImageRendererImpl;
/**
 * html转图片
 *
 * @author zhanghuibo
 * @version 1.0.0
 * @package com.html2image
 * @className Html2image
 * @date 2023-05-09  19:19
 */
public class Html2PNG {

//    static String HtmlTemplateStr = "\t<div style=\"height: 500px;width: 500px;background: #aee0ff;\">\n" +
//            "\t\t这个是一个div\n" +
//            "\t\t<h1>标题</h1>\n" +
//            "\t\t<ol>\n" +
//            "\t\t\t<li>a</li>\n" +
//            "\t\t</ol>\n" +
//            "\t\t<img style=\"margin-left: 1500px;\" width=\"300px\" height=\"200px\" src=\"https://inews.gtimg.com/newsapp_bt/0/11911825373/1000\">\n" +
//            "\t</div>";


    static String HtmlTemplateStr = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n" +
            "<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">\n" +
            "<head>\n" +
            "  <meta charset=\"UTF-8\"/>\n" +
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n" +
            "  <style>\n" +
            "    *{\n" +
            "      margin: 0;\n" +
            "      padding: 0;\n" +
            "    }\n" +
            "    .title{\n" +
            "      text-align: center;\n" +
            "    }\n" +
            "    .top_info{\n" +
            "      overflow: hidden;\n" +
            "      margin-top: 20px;\n" +
            "    }\n" +
            "    .top_info p{\n" +
            "      float: left;\n" +
            "      width: 50%;\n" +
            "      line-height: 25px;\n" +
            "      font-weight: bold;\n" +
            "    }\n" +
            "    table{\n" +
            "      width: 100%;\n" +
            "      border-top:1px solid #666 ;\n" +
            "      border-left:1px solid #666 ;\n" +
            "      text-align: center;\n" +
            "    }\n" +
            "    td{\n" +
            "      border-right:1px solid #666 ;\n" +
            "      border-bottom:1px solid #666 ;\n" +
            "    }\n" +
            "    .out_box{\n" +
            "      padding: 10px 20px;\n" +
            "    }\n" +
            "\n" +
            "    .key,.value {\n" +
            "      width: 100%;\n" +
            "      overflow: hidden;\n" +
            "    }\n" +
            "    .key{\n" +
            "      border-bottom:1px solid #666 ;\n" +
            "    }\n" +
            "    .key p,.value p {\n" +
            "      width: 9%;\n" +
            "      height: 22px;\n" +
            "      float: left;\n" +
            "      border-right:1px solid #666 ;\n" +
            "      box-sizing: border-box;\n" +
            "    }\n" +
            "    .key p:last-child,.value p:last-child {\n" +
            "      width: 10%;\n" +
            "      border-right:0px;\n" +
            "    }\n" +
            "    .value p{\n" +
            "      border-bottom:0 ;\n" +
            "    }\n" +
            "\n" +
            "    .text_box{\n" +
            "      text-align: left;\n" +
            "    }\n" +
            "    .text_box p:last-child{\n" +
            "      text-align: right;\n" +
            "      padding-right: 10em;\n" +
            "      margin-top: 1em;\n" +
            "    }\n" +
            "  \n" +
            "    .footer{\n" +
            "      margin-top: 10px;\n" +
            "      display: flex;\n" +
            "      justify-content: space-around;\n" +
            "    }\n" +
            "\n" +
            "    .footer .item{\n" +
            "      display: flex;\n" +
            "\n" +
            "    }\n" +
            "    .footer .item p {\n" +
            "      width: 100px;\n" +
            "      text-align: center;\n" +
            "      color: #0E83B7;\n" +
            "    }\n" +
            "\n" +
            "  </style>\n" +
            "</head>\n" +
            "<body style = \"font-family: SimSun;\">\n" +
            "  <div class=\"out_box\">\n" +
            "    <h2 class=\"title\">数字债权凭证</h2>\n" +
            "    <div class=\"top_info\">\n" +
            "      <p>确权日期:2023-04-13</p>\n" +
            "      <p>凭证编号:TYZX-GBBH230411006333</p>\n" +
            "      <p>承兑日期:2023-10-12</p>\n" +
            "      <p>凭证HASH: a6be31011560fle3abe8f125e356a31db6051753334e</p>\n" +
            "    </div>\n" +
            "    <table cellspacing=\"0\" cellpadding=\"0\">\n" +
            "      <tr>\n" +
            "        <td rowspan=\"4\" width=\"10%\">开立方</td>\n" +
            "        <td width=\"15%\">企业名称</td>\n" +
            "        <td width=\"25%\">蔷薇聚信(北京)科技有限公司</td>\n" +
            "        <td rowspan=\"4\" width=\"10%\">接收方</td>\n" +
            "        <td width=\"15%\">企业名称</td>\n" +
            "        <td width=\"25%\">蔷薇百煤科技服务有限公司</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>统一社会信用代码</td>\n" +
            "        <td>91110108MA01KJY21He</td>\n" +
            "        <td>统一社会信用代码</td>\n" +
            "        <td>91110108MA01PULXXB</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>开户银行</td>\n" +
            "        <td>中信银行</td>\n" +
            "        <td>开户银行</td>\n" +
            "        <td>中信银行</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>账号</td>\n" +
            "        <td>3110730030670000001</td>\n" +
            "        <td>账号</td>\n" +
            "        <td>3110730030670000001</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td rowspan=\"2\">凭证信息</td>\n" +
            "        <td>确权金额</td>\n" +
            "        <td>(大写) 六万元整</td>\n" +
            "        <td colspan=\"3\">\n" +
            "          <div class=\"key\">\n" +
            "            <p>亿</p>\n" +
            "            <p>千</p>\n" +
            "            <p>百</p>\n" +
            "            <p>十</p>\n" +
            "            <p>万</p>\n" +
            "            <p>千</p>\n" +
            "            <p>百</p>\n" +
            "            <p>十</p>\n" +
            "            <p>元</p>\n" +
            "            <p>角</p>\n" +
            "            <span>分</span>\n" +
            "          </div>\n" +
            "          <div class=\"value\">\n" +
            "            <p>￥</p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <p></p>\n" +
            "            <span></span>\n" +
            "          </div>\n" +
            "        </td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>能否转让</td>\n" +
            "        <td>可转让</td>\n" +
            "        <td>能否融资</td>\n" +
            "        <td colspan=\"2\">可融资</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td rowspan=\"2\">应收账款信息口</td>\n" +
            "        <td>合同编号</td>\n" +
            "        <td>GT23ZJ-P-XYHY-01</td>\n" +
            "        <td>签署日期</td>\n" +
            "        <td colspan=\"2\">2022-12-01</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>合同名称</td>\n" +
            "        <td>蔷薇-百煤采购合同</td>\n" +
            "        <td>基础资料</td>\n" +
            "        <td colspan=\"2\">合同、发票、验收单等</td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td rowspan=\"2\">承兑方</td>\n" +
            "        <td>企业名称</td>\n" +
            "        <td>蔷薇聚信(北京)科技有限公司</td>\n" +
            "        <td rowspan=\"2\">承兑信息</td>\n" +
            "        <td rowspan=\"2\" colspan=\"2\">\n" +
            "          <div class=\"text_box\">\n" +
            "            <p>本凭证所列应收账款的各项信息真实、无误、合法、合规、有效，交易实质已真实完整发生。</p>\n" +
            "            <p>对本凭证所列应收账款承诺到期无条件付款，其他任何纠纷均不影响我司的付款义务。</p>\n" +
            "            <p>承兑人签章:</p>\n" +
            "          </div>\n" +
            "        </td>\n" +
            "      </tr>\n" +
            "      <tr>\n" +
            "        <td>统一社会信用代码</td>\n" +
            "        <td>91110108MA01KJY21H</td>\n" +
            "      </tr>\n" +
            "    </table>\n" +



            "    <div class=\"footer\">\n" +
            "      <span class=\"item\">\n" +
            "        <p>区块链存证证书二维码</p>\n" +
            "      </span>\n" +
            "      <span class=\"item\">\n" +
            "        <p>电子签名证书颁发机构</p>\n" +
            "      </span>\n" +
            "      <span class=\"item\">\n" +
            "        <p>底层资产详情二维码</p>\n" +
            "      </span>\n" +
            "    </div>\n" +
            "  </div>\n" +
            "  \n" +
            "</body>\n" +
            "</html>";

    public static void main(String[] args) {
        HtmlParser htmlParser = new HtmlParserImpl();
        htmlParser.loadHtml(HtmlTemplateStr);
        // html 是我的html代码
        ImageRenderer imageRenderer = new ImageRendererImpl(htmlParser);
        imageRenderer.saveImage("/Users/zhanghuibo/Downloads/lcxq5.png");
    }

}
